<template>
  <div class="dashboard-container">
    <!-- github角标 -->
    <github-corner class="github-corner" />

    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <img
              class="w-20 h-20 mr-5 rounded-full"
              :src="
                URL + '/' + userStore.user.avatar + '?imageView2/1/w/80/h/80'
              "
            />
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">
                今日天气晴朗，气温在15℃至25℃之间，东南风。
              </p>
            </div>
          </div>
        </el-col>

        <el-col :span="6" :xs="24">
          <div class="flex h-full items-center justify-around">
            <el-statistic
              v-for="item in statisticData"
              :key="item.key"
              :value="item.value"
            >
              <template #title>
                <div class="flex items-center">
                  <svg-icon :icon-class="item.iconClass" size="20px" />
                  <span class="text-[16px] ml-1">{{ item.title }}</span>
                </div>
              </template>
              <!-- <template v-if="item.suffix" #suffix>{{ item.suffix }}</template> -->
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- Echarts 图表 -->
    <el-row :gutter="10" class="mt-3">
      <el-col
        :xs="24"
        :sm="12"
        :lg="8"
        class="mb-2"
        v-for="item in chartData"
        :key="item"
      >
        <component
          :is="chartComponent(item)"
          :id="item"
          height="200px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
const URL = import.meta.env.VITE_APP_API_URL;
import { reqGgmList } from "@/api/ggm/index";
import { reqDmList } from "@/api/dm/index";
import { reqCategoryList } from "@/api/category/index";
import { reqGetOrder } from "@/api/order/index";

import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";

const userStore = useUserStore();
const date: Date = new Date();

const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.user.name + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.user.name + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.user.name + "！";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

// 右上角数量
const statisticData = ref([
  {
    value: 99,
    iconClass: "play",
    title: "剧本",
    key: "message",
  },
  {
    value: 50,
    iconClass: "compere",
    title: "主持人",
    key: "upcoming",
  },
  {
    value: 10,
    iconClass: "category",
    title: "分类",
    key: "category",
  },
  {
    value: 10,
    iconClass: "order",
    title: "订单",
    suffix: "/100",
    key: "odrder",
  },
]);

// 图表数据
const chartData = ref([
  "CircumstancesPieChart",
  "PeopleNumPieChart",
  "CharacterPieChart",
]);
const chartData1 = ref(["CircumstancesPieChart", "PeopleNumPieChart"]);
const chartComponent = (item: string) => {
  return defineAsyncComponent(() => import(`./components/${item}.vue`));
};
// 获取剧本数量
const getGgmNum = async () => {
  let result = await reqGgmList({ page: 1, pageSize: 1 });
  statisticData.value[0].value = result.count;
};
// 获取主持人数量
const getCompereNum = async () => {
  let result = await reqDmList({ page: 1, pageSize: 10 });
  statisticData.value[1].value = result.count;
};

// 获取分类数量
const getCategoryNum = async () => {
  let result = await reqCategoryList({ page: 1, pageSize: 10 });
  statisticData.value[2].value = result.count;
};

// 获取订单列表
const getOrderNum = async () => {
  let result = await reqGetOrder({ page: 1, pageSize: 10 });
  // statisticData.value[3].suffix = `/${result.count}`;
  // statisticData.value[3].value = result.rows.reduce((total, item) => {
  //   if (item.is_finish) {
  //     total + 1;
  //   }
  //   return total;
  // }, 0);
  statisticData.value[3].value = result.count;
};

onMounted(() => {
  getGgmNum();
  getCompereNum();
  getCategoryNum();
  getOrderNum();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
